<script setup lang="tsx">
import { NfTable } from "@nf-ui/components/table";
import { nextTick, onMounted, ref } from "vue";
type NfTableInstance = InstanceType<typeof NfTable>;

const tableData = ref([
  {
    id: 1,
    name: "Alice",
    age: 25,
    type: "No. 189, Grove St, Los Angeles",
    updateTime: "192093102930122222222222222222",
    system: "12333333333333333333333333",
    status: "120",
  },
  { id: 2, name: "Bob", age: 30, type: "No. 189, Grove St, Los Angeles" },
  { id: 3, name: "Charlie", age: 22 },
  { id: 3, name: "Dill", age: 22 },
]);
const column = [
  {
    label: "名称",
    prop: "name",
    width: 200,
  },
  {
    label: "类型",
    prop: "type",
  },
  {
    label: "更新时间",
  },
  {
    label: "系统内置",
    prop: "system",
    showOverflowTooltip: true,
  },
  {
    label: "状态",
    prop: "status",
    render: (scope: any) => {
      return (
        <span style={{ color: "red" }}>
          use render function: {scope.row.status}
        </span>
      );
    },
  },
];
const refTable = ref<NfTableInstance>();

const page = ref(1);

onMounted(async () => {
  await nextTick();
});
</script>

<template>
  <div class="table-example">
    <el-card>
      <nf-table
        ref="refTable"
        v-model:page="page"
        :data="tableData"
        :column="column"
        :max-height="300"
        stripe
        border
        pagination
        :pagination-config="{
          total: 100,
          currentPage: 10,
          layout: 'prev,pager,next, ->, total',
          background: true,
          onCurrentChange: (page) => {
            console.log(page);
          }
        }"
      >
      </nf-table>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.table-example {
  padding: 24px;
}
</style>
